<template>
    <view class="globe_back">
        <view class="box">
            <view class="f_40 fw_bold">写评价，请给这次服务体验打分</view>
            <!--商品 -->
            <view class="flex back_fff p_24 br_24 mt_24">
                <view>
                    <image class="shopImg" src="@/static/imgs/img.png" mode="widthFix"></image>
                </view>
                <view>
                    <view class="fw_bold f_32 listTitle">小牛电动 B0都市版新国标...</view>
                    <view class="flex justify_content_between">
                        <view class="cl_999CA3 mr_24 f_28">2021新款;220V</view>
                        <view class="cl_999CA3 mr_24 f_28">x1</view>
                    </view>
                    <view class="flex justify_content_end mt_40 f_28">￥50.25</view>
                </view>
            </view>
            <!-- 评价 -->
            <view class="store">
                <view class="f_28">评价</view>
                <textarea class="f_28" name="" id="" cols="30" rows="10" placeholder="在这里输入您的评价"></textarea>
                <view>
                    <view class="flex flex-wrap">
                        <view v-if="images.length > 0" v-for="(item, i) in images">
                            <image class="storeImg" :src="item" mode="widthFix"></image>
                            <view class="imm_delete" @click="deletephotos(i)">
                                <image class="icon_ljt" :src="url + 'icon_sc.png'"></image>
                            </view>
                        </view>
                        <view class="img_add" style="display: inline-block" v-if="images.length < maxImagesNum" @click="instoreImages">
                            <image :src="url + 'updata-img.png'" mode="" style="width: 100%; height: 100%"></image>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 服务体验 -->
            <view class="flex store">
                <view class="f_28 starTitle">服务体验</view>
                <view class="flex">
                    <!-- <image v-for="i in 5" :key="'star' + i" v-if="starIndex > i" @click="starIndex = i + 1" class="star" src="@/static/imgs/star.png" mode="widthFix"></image>
          <image v-for="i in 5" :key="'star_k' + i" v-if="starIndex <= i" @click="starIndex = i + 1" class="star" src="@/static/imgs/star_k.png" mode="widthFix"></image> -->
                    <u-rate :count="count" v-model="starIndex" active-color="#FF6401" inactive-color="#F7F7F7" :size="24" gutter="2" />
                    <view class="starText" v-if="starIndex == 1">差评！</view>
                    <view class="starText" v-if="starIndex == 2">差评！</view>
                    <view class="starText" v-if="starIndex == 3">中评！</view>
                    <view class="starText" v-if="starIndex == 4">中评！</view>
                    <view class="starText" v-if="starIndex == 5">好评！</view>
                </view>
            </view>
            <!-- 接单员 -->
            <view class="flex justify_content_between store" v-if="type == 1">
                <view class="flex">
                    <image class="storeImg" src="@/static/imgs/cqt.png" mode=""></image>
                    <view>
                        <view class="storeTitle">同路仁接单员</view>
                        <view class="salesVolume">
                            <u-rate :count="count" v-model="value" active-color="#FF6401" inactive-color="#F7F7F7" size="16" gutter="2"></u-rate>
                        </view>
                    </view>
                </view>
                <view>
                    <image class="address" src="@/static/imgs/icon_dpdz.png" mode=""></image>
                    <text class="addressText">电话联系</text>
                </view>
            </view>
            <!-- 评价 -->
            <view class="store">
                <view class="f_28">评价</view>
                <textarea class="f_28" name="" id="" cols="30" rows="10" placeholder="在这里输入您的评价"></textarea>
                <view>
                    <view class="flex flex-wrap">
                        <view v-if="images.length > 0" v-for="(item, i) in images">
                            <image class="storeImg" :src="item" mode="widthFix"></image>
                            <view class="imm_delete" @click="deletephotos(i)">
                                <image class="icon_ljt" :src="url + 'icon_sc.png'"></image>
                            </view>
                        </view>
                        <view class="img_add" style="display: inline-block" v-if="images.length < maxImagesNum" @click="instoreImages">
                            <image :src="url + 'updata-img.png'" mode="" style="width: 100%; height: 100%"></image>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 服务体验 -->
            <view class="flex store">
                <view class="f_28 starTitle">服务体验</view>
                <view class="flex">
                    <!-- <image v-for="i in 5" :key="'star' + i" v-if="starIndex1 > i" @click="starIndex1 = i + 1" class="star" src="@/static/imgs/star.png" mode="widthFix"></image>
          <image v-for="i in 5" :key="'star_k' + i" v-if="starIndex1 <= i" @click="starIndex1 = i + 1" class="star" src="@/static/imgs/star_k.png" mode="widthFix"></image> -->
                    <u-rate :count="count" v-model="starIndex1" active-color="#FF6401" inactive-color="#F7F7F7" :size="24" gutter="2" />
                    <view class="starText" v-if="starIndex1 == 1">差评！</view>
                    <view class="starText" v-if="starIndex1 == 2">差评！</view>
                    <view class="starText" v-if="starIndex1 == 3">中评！</view>
                    <view class="starText" v-if="starIndex1 == 4">中评！</view>
                    <view class="starText" v-if="starIndex1 == 5">好评！</view>
                </view>
            </view>
            <view class="couponBtn">提交评价</view>
        </view>
    </view>
</template>

<script>
import { common } from '@/common/serve.js';
export default {
    data() {
        return {
            type: 1, //0评价，1电池评价
            url: '',
            count: 5,
            value: 5,
            images: [],
            maxImagesNum: 6,
            starIndex: 0,
            starIndex1: 0
        };
    },
    onShow() {
        this.url = this.baseUrl + this.imgPath;
    },
    methods: {
        // 删除现场照片
        deletephotos(i) {
            this.images.splice(i, 1);
        },
        // 现场照片
        async instoreImages() {
            let images = this.images;
            let num = this.maxImagesNum - images.length; //图片长度

            const result = await common.chooseImage(num).catch((err) => console.log('chooseImageErrMsg:', err));
            const suceessList = (result || []).filter((item) => item.isSuccess === true);
            if (suceessList.length > 0) {
                suceessList.map((item) => {
                    images.push(item.path);
                });

                this.images = images;
            }
        }
    }
};
</script>

<style scoped lang="scss">
.shopImg {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
    margin-right: 24rpx;
}
.listTitle {
    width: 400rpx;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tip {
    font-size: 24rpx;
    color: #999ca3;
    padding: 8rpx 16rpx;
    background: #f7faff;
    border-radius: 8rpx;
}
.minMoney {
    color: #ff6401;
    font-size: 32rpx;
    font-weight: bold;
}
.box {
    padding: 32rpx;
    .list {
        padding: 24rpx;
        border-radius: 24rpx;
        margin-top: 24rpx;
        .round {
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            background: #00091a;
            font-size: 28rpx;
            margin-top: 16rpx;
        }
        .type {
            color: #3377ff;
            font-weight: bold;
        }
        .time {
            color: #ccced1;
        }
        .title {
            width: 90%;
            color: #00091a;
            font-size: 32rpx;
            font-weight: bold;
        }
        .address {
            display: inline-block;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .name {
            font-weight: normal;
            color: #333a47;
            margin-right: 24rpx;
        }
        .iphone {
            font-weight: normal;
            color: #999ca3;
        }
        .money {
            text-align: right;
            color: #666b75;
        }
        .money text {
            color: #ff6401;
            font-weight: bold;
            font-size: 32rpx;
        }
        .btn {
            text-align: right;
        }
        .cance {
            width: 160rpx;
            height: 68rpx;
            line-height: 68rpx;
            border-radius: 8rpx;
            color: #666b75;
            text-align: center;
            border: 2rpx solid #ccced1;
            margin-top: 24rpx;
        }
        .buy {
            width: 160rpx;
            height: 68rpx;
            line-height: 68rpx;
            border-radius: 8rpx;
            color: #ffffff;
            text-align: center;
            background: #3377ff;
            margin-left: 24rpx;
            margin-top: 24rpx;
        }
    }

    .store {
        padding: 24rpx;
        background: white;
        border-radius: 24rpx;
        margin-top: 30rpx;
    }
    .storeImg {
        width: 96rpx;
        height: 96rpx;
        border-radius: 16rpx;
        margin-right: 16rpx;
    }
    .storeTitle {
        color: #00091a;
        font-size: 32rpx;
        margin-bottom: 8rpx;
    }
    .address {
        width: 48rpx;
        height: 48rpx;
        display: block;
        margin: 0 auto;
    }
    .addressText {
        color: #999ca3;
        font-size: 24rpx;
    }
    .salesVolume {
        color: #999ca3;
        font-size: 28rpx;
    }
}
.imgbox {
    background: white;
    border-radius: 24rpx;
    padding: 32rpx 24rpx;
    color: #333a47;
    font-size: 28rpx;
    margin-top: 24rpx;
}
.img_add {
    width: 140rpx;
    height: 140rpx;
}
.imgbox {
    background: white;
    border-radius: 24rpx;
    padding: 32rpx 24rpx;
    color: #333a47;
    font-size: 28rpx;
    margin-top: 24rpx;
}
.star {
    width: 48rpx;
    height: 48rpx;
}
.starTitle {
    padding-right: 48rpx;
}
.couponBtn {
    margin: 24rpx auto;
    width: 686rpx;
    height: 100rpx;
    border-radius: 24rpx;
    background: #3377ff;
    text-align: center;
    line-height: 100rpx;
    color: white;
    font-size: 32rpx;
    font-weight: bold;
}
.starText {
    margin-left: 16rpx;
    font-size: 32rpx;
    color: #ff6401;
    font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
}
</style>
